<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<boby >
    <div id="app">
        <template>
            <div style="text-align: center">
                <el-button type="warning" @click="type='JAVA';rollcallgorup();" style="flex: auto" icon="el-icon-user">
                    JAVA每组随机
                </el-button>
                <el-button type="info" @click="type='BI';rollcallgorup();" style="flex: auto" icon="el-icon-user-solid">
                    BI每组随机
                </el-button>
                <el-button type="primary" @click="input1=3">3</el-button>
                <el-button type="success" @click="input1=4">4</el-button>
                <el-button type="danger" @click="input1=5">5</el-button>
                ---->
                <el-input style="width: 300px;flex: content" v-model="input1" placeholder="请输入点名人数"></el-input>
                <el-button type="warning" @click="type='JAVA';rollcall();" style="flex: auto" icon="el-icon-user">
                    JAVAWEB
                </el-button>
                <el-button type="info" @click="type='BI';rollcall();" style="flex: auto" icon="el-icon-user-solid">
                    BI
                </el-button>
            </div>
                <el-table style="opacity: 0.6"
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="ID"
                            width="180">
                    </el-table-column>
                    <el-table-column style="color: pink"
                                     prop="name"
                                     label="姓名"
                                     width="180">
                    </el-table-column>
                    <el-table-column
                            prop="cord"
                            label="组">
                    </el-table-column>
                    <el-table-column
                            prop="department"
                            label="部门">
                    </el-table-column>
                    <el-table-column
                            prop="clazz"
                            label="班级">
                    </el-table-column>
                </el-table>
        </template>

    </div>
    <script>
        let temp = new Vue({
            el: '#app',
            data: {
                type: "JAVA",
                input1: ""
                ,
                tableData: [{
                    id: "",
                    name: "",
                    cord: "",
                    department: "",
                    clazz: ""
                }]
            },
            methods: {
                rollcall() {
                    axios.post(`http://localhost:8080/random/call?num=${this.input1}&type=${this.type}`)
                        .then(function (response) {
                            temp.tableData = response.data.data.data;
                            temp.$notify({
                                title: "成功",
                                type: "success",
                            });
                        }, function (err) {
                            temp.$notify({
                                title: "失败",
                                type: "err",
                            });
                        })
                },
                rollcallgorup() {
                    axios.post(`http://localhost:8080/random/groupcall?type=${this.type}`)
                        .then(function (response) {
                            temp.tableData = response.data.data.data;
                            temp.$notify({
                                title: "成功",
                                type: "success",
                            });
                        }, function (err) {
                            temp.$notify({
                                title: "失败",
                                type: "err",
                            });
                        })
                }
            },
            created() {

            },
        })
    </script>
    <style>
        #app{
            background: url("https://img.zcool.cn/community/0114065bee9807a80121ab5deda88c.jpg@1280w_1l_2o_100sh.jpg");
            width: 100%;
            height: 100%;
            opacity:1;
            background-size: 100%;
            background-repeat: no-repeat;

        }
    </style>
</boby>
</html>